{% extends "base.html" %}

{% block title %}我的预订 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold text-primary mb-2">我的预订</h1>
  <p class="text-gray-600 mb-8">查看和管理您的预订记录</p>

  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-6 border-b border-gray-100">
      <h2 class="text-2xl font-semibold text-gray-800">预订记录</h2>
      <p class="text-gray-500 mt-1">您所有的预订历史</p>
    </div>

    <div class="divide-y divide-gray-100">
      {% if bookings %}
        {% for booking in bookings %}
        <div class="p-6 hover:bg-gray-50 transition-colors">
          <div class="flex flex-col md:flex-row md:justify-between gap-4">
            <div class="md:w-2/3">
              <h3 class="text-xl font-semibold text-gray-800">{{ booking.room_name }}</h3>
              <div class="flex flex-wrap items-center mt-2 gap-3">
                <span class="text-sm px-2 py-1 bg-gray-100 text-gray-600 rounded">
                  {{ booking.room_type }}
                </span>
                <span class="text-sm text-gray-500">
                  <i class="fas fa-calendar-alt mr-1"></i>
                  {{ booking.check_in }} 至 {{ booking.check_out }}
                </span>
                <span class="text-sm text-gray-500">
                  <i class="fas fa-user mr-1"></i>
                  {{ booking.guests }} 人
                </span>
              </div>
              <p class="text-gray-600 mt-3">
                预订时间: {{ booking.created_at.strftime('%Y-%m-%d %H:%M') }}
              </p>
            </div>
            <div class="md:w-1/3">
              <div class="flex flex-col items-end h-full justify-between">
                <div class="text-right">
                  <span class="text-primary font-bold text-xl">¥{{ booking.total_price }}</span>
                </div>
                <div class="mt-3">
                  {% if booking.status == 'pending' %}
                    <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-sm rounded">
                      待确认
                    </span>
                  {% elif booking.status == 'confirmed' %}
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded">
                      已确认
                    </span>
                  {% elif booking.status == 'checked_in' %}
                    <span class="px-2 py-1 bg-green-100 text-green-800 text-sm rounded">
                      已入住
                    </span>
                  {% elif booking.status == 'checked_out' %}
                    <span class="px-2 py-1 bg-gray-100 text-gray-800 text-sm rounded">
                      已退房
                    </span>
                  {% elif booking.status == 'cancelled' %}
                    <span class="px-2 py-1 bg-red-100 text-red-800 text-sm rounded">
                      已取消
                    </span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      {% else %}
        <div class="p-12 text-center">
          <i class="fas fa-book text-gray-300 text-5xl mb-4"></i>
          <h3 class="text-xl font-medium text-gray-700 mb-2">暂无预订记录</h3>
          <p class="text-gray-500 mb-4">您还没有任何预订记录</p>
          <a href="{{ url_for('simple_user.simple_book') }}" 
             class="inline-block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
            立即预订
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}